<template>
  <swiper class="swiper" :options="swiperOption" ref="mySwiper">
    <!-- slides -->
    <swiper-slide v-for="sowing in sowing_list" :key="sowing.public_id">
      <img :src="sowing.icon_url" alt="sowing.public_name">
    </swiper-slide>
    
    <!-- Optional controls -->
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
</template>


<script>
//引入swiper轮播组件
import "swiper/dist/css/swiper.css";
import { swiper, swiperSlide } from "vue-awesome-swiper";

export default {
  name: "sowing",
  props: {
    sowing_list: Array
  },
  data() {
    return {
      // swiper:'',
      swiperOption: {
        notNextTick: true,
        //分页
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
          // bulletActiveClass:'my-bullet-active'
        },
        //循环
        loop: true,
        //轮播切换时长
        autoplay: {
          delay: 1500
          // stopOnLastSlide: false,
          // disableOnInteraction: true
        },
        //切换速度
        speed: 600,

        //单张图片滑动结束回调函数监听
        on: {
          slideChangeTransitionEnd() {
            // console.log(this.activeIndex)
          }
        }
      }
    };
  },
  //计算属性监听
  computed: {
    swiper() {
      // 拿到swiper对象
      return this.$refs.mySwiper.swiper;
    }
  },
  // mounted:{
  //   // this.swiper.slideTo(5, 1000, false);
  // },

  methods: {},
  components: {
    swiper,
    swiperSlide
  }
};
</script>


<style  scoped>
.swiper {
  margin-top:3.5rem;
  width: 100%;
  height: 19rem;
}

.swiper img{
    width: 100%;
    height: 100%;
  }
/* 什么优先级都无法改的样式  用  穿透改样式 不支持 less 格式 */
.swiper >>> .swiper-pagination-bullet-active{
    background-color: #75a342;
  }

</style>